<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/alert.css"/>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js"></script>
		<script src="js/alert.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="//unpkg.com/element-ui@2.0.7/lib/index.js"></script>-->
		<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
		<title>商品详情</title>
	</head>

	<body>
		<div class="top_bar_wrap">
			<div class="top_bar">
				<div class="top_bar_lf lf">
					您好，欢迎来到爱贝宠宠物网！
				</div>
				<div class="top_bar_rg rg">
					<a class="login rg" href="login.html">登录</a>
					<a class="rigester rg" href="register.html">注册</a>
					<a href="shopCar.html"><span class="shop_car rg">购物车&nbsp;<span>0</span></span>
					</a>
					<a class="help rg" href="#">帮助中心</a>
					<a class="help rg j_my_account" href="my_account.html">我的账户</a>

				</div>
			</div>
		</div>
		<div class="header_wrap">

			<div class="header_left lf">
				<a href="index.html"><img src="images/logo.png" /></a>
			</div>
			<div class="header_center lf">
				<div class="search_wrap">

					<select class="lf" name="">
						<option value="">商品</option>
					</select>
					<input class="lf search_content" type="text" />
					<input class="lf search_btn" type="button" name="" id="" value="搜索" />
				</div>
			</div>
			<div class="header_right lf">
				<div class="lf phone_logo">
					<img src="images/icon_phone.jpg" />
				</div>
				<div class="lf">
					<p class="service_title">客户服务电话</p>
					<p class="service_num">4006007272</p>
				</div>
			</div>
		</div>
		<div class="menu">
			<div class="menu_inner">
				<ul>
					<li>
						<a href="javascript:void(0)">全部商品分类</a>
					</li>
					<li>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="product.html">宠物商品</a>
					</li>
				</ul>
			</div>
		</div>
		<!--商品内容-->
		<div class="product_detail_content">
			<div class="product_detail_nav">
				<a href="index.html">首页</a>
				<a href="index.html">营养食品</a>
				<a href="index.html">麦德氏</a>
				<a href="index.html">麦德氏美国in赢壮骨多矿钙磷粉250g狗钙粉宠物泰迪比熊补钙预防250g</a>
			</div>
			<div class="product_buy v_product_buy">
				<div class="product_photo_lg">
					<img :src="'/public'+ product_photo_lg" alt="">
				</div>
				<div class="product_buy_take">
					<h5>{{product_buy_take.describe}}</h5>
					<div class="product_sale_price">
						<label>售&ensp;&ensp;价</label> &yen;{{product_buy_take.sell_price}}<br>
						
					</div>
					<div class="product_sele_dispatch">
						<label>配送至</label>
						<select name="" id="" @change="changeArea" v-model="areaName">
							<option v-for='list in product_dispatch' :label="list.area_name" :value="list.area_id"></option>
						</select>
						<span>运费：{{sprice}}&nbsp;元</span>
					</div>
					<div>
						<label>服&ensp;&ensp;务</label>
						<span>由<b>爱贝宠商城</b>负责发货，并提供售后服务。</span>
					</div>
					<div class="product_sele_spec">
						<label>规&ensp;&ensp;格</label>
						<li v-for='list in product_sele_spec'>
							<input name="spec" type="radio" :value='list.id'><span>{{list.format_name}}</span>
						</li>
					</div>
					<div class="product_sele_num">
						<label>数&ensp;&ensp;量</label>
						<li>
							<input type="text" v-model="num" min="1">
							<span class="num_minus" @click="num_minus">-</span>
							<span class="num_add" @click="num_add">+</span>
						</li>

						<span>库存{{ goods_store_nums }}件</span>
					</div>
					<div class="product_sele_option">
						<label></label>

						<a class="buy_now" href="javascript:void(0);">立即购买</a>
						<a class="add_car" href="javascript:void(0);"><img src="images/shopping_car.jpg" alt="">加入购物车</a>
					</div>
				</div>
				<div class="product_photo_sm">
					<li v-for='list,index in product_photo_sm' @click="clickShow(index, list.img)" v-bind:class="{active:index==active}"><img :src="'/public'+list.img" alt=""></li>
				</div>
			</div>
			<div class="product_detail_main" id="v_product_detail_main">
				<div class="detail_main_aside">
					<dl class="ranking">
						<dt>销量排行榜</dt>
						<dd>
							<a href="#">
								<img src="images/shopping2.jpg" alt="">
								<p>
									<span class="ranking_name">山东省短发东方网IE反光镜哇塞光热</span>
									<span class="ranking_price">&yen;123</span>
								</p>
							</a>
						</dd>
						<dd>
							<a href="#">
								<img src="images/shopping2.jpg" alt="">
								<p>
									<span class="ranking_name">山东省短发东方网IE反光镜哇塞光热</span>
									<span class="ranking_price">&yen;123</span>
								</p>
							</a>
						</dd>
						<dd>
							<a href="#">
								<img src="images/shopping2.jpg" alt="">
								<p>
									<span class="ranking_name">山东省短发东方网IE反光镜哇塞光热</span>
									<span class="ranking_price">&yen;123</span>
								</p>
							</a>
						</dd>
						<dd>
							<a href="#">
								<img src="images/shopping2.jpg" alt="">
								<p>
									<span class="ranking_name">山东省短发东方网IE反光镜哇塞光热</span>
									<span class="ranking_price">&yen;123</span>
								</p>
							</a>
						</dd>
						<dd>
							<a href="#">
								<img src="images/shopping2.jpg" alt="">
								<p>
									<span class="ranking_name">山东省短发东方网IE反光镜哇塞光热</span>
									<span class="ranking_price">&yen;123</span>
								</p>
							</a>
						</dd>
					</dl>
					<ul class="customer">
						<p>
							客服中心
							<span>CUSTOMER</span>
						</p>
						<li>
							在线咨询
						</li>
						<li>
							在线客服 <img src="images/listening.png" alt="">联系我们
						</li>
						<li>
							工作时间
						</li>
						<li>
							AM:10：00--PM:18：00
						</li>
					</ul>
				</div>
				<div class="detail_main_section" id="v_product_detail_tabs">
					<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
						<el-tab-pane label="规格参数" name="first">
							<div class="goods_gui_wrap">
								<li>
									<span>商品名称：</span><span>{{product_detail.name}}</span>
								</li>
								<li>
									<span>商品编号：</span><span>狗狗的粮食</span>
								</li>
								<li>
									<span>店铺：</span><span></span>
								</li>
								<li>
									<span>商品品牌：</span><span>狗狗的粮食</span>
								</li>
								<li>
									<span>规格：</span><span>{{product_detail.weight}}kg</span>
								</li>
								<li>
									<span>功效：</span><span>狗狗的粮食</span>
								</li>
								<li>
									<span>试用对象：</span><span>狗狗的粮食</span>
								</li>
								<li>
									<span>物理形态：</span><span>狗狗的粮食</span>
								</li>
								<li>
									<span>用法：</span><span>狗狗的粮食</span>
								</li>
							</div>
							<div class="product_detail_img_wrap">
								<img :src="'/public'+product_detail.logo" />
							</div>
						</el-tab-pane>
						<el-tab-pane label="商品详情" name="second">
							<div class="product_detail_img_wrap">
								<img :src="'/public'+product_detail.logo" />
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
		<div class="footer">
			<p>版权所有：天津晟联美图贸易有限公司</p>
			<p>Copyright © 2017 http://www.ibabypet.com.cn 爱贝宠物网 &nbsp; 津ICP备17006246号</p>
		</div>
		<!--购买弹窗-->
		<div class="payment_modal">
		</div>
		<div class="payment_scan_wrap">
			<p>手机扫码支付</p>
			<div class="weixin_wrap">
				<img src="images/weixin_logo.png" />
				<p>微信支付</p>
				<img class="wx_erweima" src="images/weixin.jpg" />

			</div>
			<div class="zhifu_wrap">
				<img src="images/zhifubao_logo.png" />
				<p>支付宝支付</p>
				<img class="zfb_erweima" src="images/zhifubao.jpg" />
			</div>
		</div>
		<script src="js/product_detail.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>